<template>
  <el-dialog
    :visible.sync="dialogVisible"
    @close="close">
    <div slot="title">{{ info.type === 1 ? '新增' : '编辑' }}</div>
      <el-form hide-required-asterisk
       :model="refFormData"
       label-width="80px"
       :rules="rules"
       class="label-row"
       ref="refForm">
        <el-form-item prop="name" label="角色名">
          <el-input clearable
                    size="small"
                    autofocus
                    v-model="refFormData.name" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item prop="group_id" label="部门">
            <el-select v-model="refFormData.group_id" size="small"
                    filterable
                    reserve-keyword
                    placeholder="请选择部门">
            <el-option
              v-for="item in list"
              :key="item.id"
              :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="close()">取消</el-button>
        <el-button type="success" @click="submit('refForm')">保存</el-button>
      </span>
  </el-dialog>
</template>

<script>
  export default {
    name:'dialogBox',
    props: {
      info : {
        type: Object,
        default: () => ({
        })
      }
    },
    data(){
      return {
        dialogVisible: true,
        refFormData:{
          "name": "",
          "group_id": ""
        },
        rules: {
          name: [
            { required: true, message: '必填', trigger: 'blur' },
            { min: 1, max: 30, message: '', trigger: 'blur' }
          ],
          group_id: [
            { required: true, message: '必填', trigger: 'blur' },
          ],
        },
        list: []
      };
    },
    mounted(){
      this.refFormData = {
        ...this.info
      }
      this.getList()
    },
     methods: {

     /**
      * @Desc 数据提交
      * */
      async submit(formName){
        this.$refs[formName].validate(async (valid) => {
          if (!valid) return
          const params = {
            ...this.refFormData,
            "privilege": 8
          }
          console.log(params)
          const { data } = await this.$api.role[this.info.type === 1 ? 'add' : 'update'](params)
          this.__globalHandleResponseMixin(data
            ,() => {
              this.$emit('getList')
              this.close()
          })
        })
      },

    /*
     * @Desc: 获取列表
     * @params: {String}
     * @return: {Object}
    */
    async getList() {
      const { data } = await this.$api.group.getList({
        group_id: 2
      })
      const { code, data: list } = data
      if(code === 200) {
        this.list = list
      }
    },

     /**
      * @Desc 关闭
      * @params {String}
      * @return {Object}
      * */
      close(){
        this.$emit('close')
      }
    },
  }
</script>

<style lang='less' scoped>
</style>
